<template>
    <el-row>
        <el-col :span="24">
            <div class="searchBox">
                <el-col :span="4"> <div style="border-radius: 4px;min-height: 36px;"/></el-col>
                <el-col :span="16">
                    <div style="height: 100px"></div>
                    <div>
                        <el-tabs type="border-card" style="height: 500px;">
                            <el-tab-pane label="订购机票">
                               <div class="box1">
                                   <div style="font-size: 10px;position: absolute;top: 50px;left:100px;">
                                       <el-popover
                                               placement="top-start"
                                               title="购票须知"
                                               width="250"
                                               trigger="hover"
                                               content="多段的目的地可以是一个国家/地区的两个不同航点：比如去程选择上海-东京，返程选择大阪-上海。最多可支持查询6段航班，若超出6段请致电95530咨询。">
                                           <el-button slot="reference">购票须知</el-button>
                                       </el-popover>
                                   </div>
                                   <div style="font-size: 15px;position: absolute;top: 100px;left:240px;">
                                       出发城市：<el-input class="search" id="go-city" placeholder="上海" value="上海" style="width: 100px"/>
                                       <i class="el-icon-refresh" style="font-size: 30px"></i>目的地城市：<el-input class="search" id="to-city" placeholder="北京" value="北京" style="width: 100px"/>
                                   </div>
                                   <div style="font-size: 15px;position: absolute;top: 180px;left:215px;">
                                       选择日期：<el-date-picker v-model="value0" type="daterange" range-separator="至" start-placeholder="出发日期" end-placeholder="返程日期"/>
                                   </div>
                                   <div style="font-size: 15px;position: absolute;top: 250px;left:500px;">
                                       <el-button type="primary" icon="el-icon-search" @click="$router.push('/order')">搜索</el-button>
                                   </div>
                               </div>
                            </el-tab-pane>
                            <el-tab-pane label="度假旅游">
                                <div class="box2">
                                    <div style="font-size: 10px;position: absolute;top: 50px;left:100px;">
                                        <el-popover
                                                placement="top-start"
                                                title="购票须知"
                                                width="250"
                                                trigger="hover"
                                                content="多段的目的地可以是一个国家/地区的两个不同航点：比如去程选择上海-东京，返程选择大阪-上海。最多可支持查询6段航班，若超出6段请致电95530咨询。">
                                            <el-button slot="reference">购票须知</el-button>
                                        </el-popover>
                                    </div>
                                    <div style="font-size: 15px;position: absolute;top: 100px;left:240px;">
                                        出发城市：<el-input class="search" id="go-city1" placeholder="上海" value="上海" style="width: 100px"/>
                                        <i class="el-icon-refresh" style="font-size: 30px"></i>目的地城市：<el-input class="search" id="to-city1" placeholder="三亚" value="三亚" style="width: 100px"/>
                                    </div>
                                    <div style="font-size: 15px;position: absolute;top: 180px;left:215px;">
                                        选择日期：<el-date-picker v-model="value0" type="daterange" range-separator="至" start-placeholder="出发日期" end-placeholder="返程日期"/>
                                    </div>
                                    <div style="font-size: 15px;position: absolute;top: 250px;left:500px;">
                                        <el-button type="primary" icon="el-icon-search" @click="$router.push('/order')">搜索</el-button>
                                    </div>
                                </div>
                            </el-tab-pane>
                            <el-tab-pane label="东航金融">
                                <div class="box3"></div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
                <el-col :span="4"> <div style="border-radius: 4px;min-height: 36px;"/></el-col>
            </div>
        </el-col>
    </el-row>
</template>
<script>
    export default {
        data() {
            return {
                value0: '',
            };
        },
        methods:{
        }
    }
</script>
<style>
    .searchBox{
        background-image: url("../children/image/PuDong.jpg");
        width: 100%;
        height: 800px;
    }
    .box1{
        background-image: url("../children/image/DFDP.png");
        width: 860px;
        height: 430px;
    }
    .box2{
        background-image: url("../children/image/DFDJ.png");
        width: 860px;
        height: 430px;
    }
    .box3{
        background-image: url("../children/image/DFJR.png");
        width: 860px;
        height: 430px;
    }
</style>